<template>
  <main class="content">
    <header class="header">
      <div class="title">案件处罚智能辅助系统</div>
      <div style="display: flex; align-items: center; margin-bottom: 15px">
        <van-search
          style="width: 100%"
          v-model="state.value"
          @focus="jump"
          shape="round"
          background="#5384D2"
          placeholder="请输入搜索关键词"
        />
        <i class="file-query" @click="jumpHelpCenter"></i>
      </div>
      <div class="content-tab">
        <div class="content-tab-btn" @click="jumpRecognitionView(1)">
          <i class="btn-icon img-wei"></i><span>违法行为识别</span>
        </div>
        <div class="content-tab-btn active" @click="jumpRecognitionView(2)">
          <i class="btn-icon img-fa"></i><span>行政处罚建议</span>
        </div>
      </div>
    </header>
    <div class="list">
      <div class="list-select">
        <span class="list-select-title">法律法规</span>
        <div style="width: 60px">
          <van-dropdown-menu>
            <van-dropdown-item v-model="industryCheck" :options="industryOption" />
          </van-dropdown-menu>
        </div>
      </div>
      <van-tabs v-model:active="state.active" @click-tab="onClickTab">
        <van-tab title="国家法规"></van-tab>
        <van-tab title="地方法规"></van-tab>
        <van-tab title="裁量基准"></van-tab>
        <van-tab title="违法行为"></van-tab>
      </van-tabs>
      <div class="list-content">
        <div
          class="list-content-item"
          v-for="item in state.list"
          :key="item.id"
          @click="jumpPage(item)"
        >
          <div>
            <span class="item-name">{{ listTitle }}</span>
            <!-- <span>2023-12-21</span> -->
          </div>
          <p class="item-text">
            {{ item.infoName }}
          </p>
          <p class="item-info">{{ item.infoDesc }}</p>
        </div>
      </div>
    </div>
  </main>
</template>
<script setup>
import { useRouter } from 'vue-router'
// import { useCounterStore } from '@/stores/counter'
import { lawQueryLaw, lawQueryStd, lawActQuery } from '@/api'
import { computed, onMounted, ref, reactive } from 'vue'

// const store = useCounterStore()
const router = useRouter()
const state = reactive({
  title: '',
  active: 0,
  value: '',
  list: []
})
const listTitle = computed(() => {
  return state.active === 0
    ? '国家法规'
    : state.active === 1
      ? '地方法规'
      : state.active === 2
        ? '裁量基准'
        : '违法行为'
})
const industryCheck = ref(0)
const industryOption = [
  { text: '领域', value: 0 },
  { text: '广告', value: 1 },
  { text: '食品', value: 2 },
  { text: '商标', value: 3 },
  { text: '零售', value: 4 },
  { text: '彩妆', value: 5 }
]
const jumpPage = (val) => {
  switch (state.active) {
    case 0:
      router.push({
        path: '/details',
        query: { type: 1, key: val['法律编号'], data: JSON.stringify(val) }
      })
      break
    case 1:
      router.push({
        path: '/details',
        query: { type: 1, key: val['法律编号'], data: JSON.stringify(val) }
      })
      break
    case 2:
      router.push({ path: '/details', query: { type: 2, key: val.key, data: JSON.stringify(val) } })
      break
    case 3:
      router.push({ path: '/details', query: { type: 3, key: val.key, data: JSON.stringify(val) } })
      break
    default:
      break
  }
}
// 跳转到查询页面
const jump = () => {
  router.push('/query')
}
const jumpRecognitionView = (type) => {
  if (type === 1) {
    router.push({ path: '/recognitionView', query: { type: 1 } })
  } else {
    router.push({ path: '/recognitionView', query: { type: 2 } })
  }
}
const onClickTab = (val) => {
  switch (val.name) {
    case 0:
      queryLawQueryLaw()
      break
    case 1:
      queryLawQueryLaw('地方法规')
      break
    case 2:
      queryLawQueryStd()
      break
    case 3:
      queryLawActQuery()
      break
  }
}
const queryLawQueryLaw = (query = '国家法规') => {
  lawQueryLaw({
    query,
    scope: ''
  }).then((res) => {
    state.list = res.data.nodes
    state.list.forEach((item) => {
      item.infoName = item['条款项']
      item.infoDesc = item['法律名称']
    })
  })
}
const queryLawQueryStd = () => {
  lawQueryStd({}).then((res) => {
    state.list = res.data.nodes
    state.list.forEach((item) => {
      item.infoName = item.name
      item.infoDesc = item['基准标题']
    })
  })
}
const queryLawActQuery = () => {
  lawActQuery({}).then((res) => {
    state.list = res.data.nodes
    state.list.forEach((item) => {
      item.infoName = item['违法行为名称']
      item.infoDesc = item['法律文本']
    })
  })
}
const jumpHelpCenter = () => {
  router.push('/helpCenter')
}
onMounted(() => {
  queryLawQueryLaw()
})
</script>
<style lang="scss" scoped>
.content {
  background-color: #f9f9f9;
  width: 100%;
  height: 100vh;

  .header {
    height: 240px;
    padding: 20px;
    background: #5384d2;
    --van-search-input-height: 40px;

    .file-query {
      display: inline-block;
      width: 40px;
      height: 36px;
      background: url('../assets/imgs/file_icon.png') no-repeat;
      background-size: 100% 100%;
    }

    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80px;
      font-size: 26px;
      color: #fff;
    }

    .content-tab {
      display: flex;
      justify-content: space-between;

      .content-tab-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 48%;
        height: 80px;
        border-radius: 8px;
        color: #f5c4a2;
        background-color: #3c74cd;

        .btn-icon {
          display: inline-block;
          width: 40px;
          height: 40px;
        }

        .img-wei {
          background: url('../assets/imgs/wei_icon.png') no-repeat;
          background-size: 100% 100%;
        }

        .img-fa {
          background: url('../assets/imgs/fa_icon.png') no-repeat;
          background-size: 100% 100%;
        }
      }

      .active {
        background: #2665cb;
      }
    }
  }

  .list {
    height: 58vh;
    margin: 20px 20px 0 20px;
    padding: 0 15px 15px 15px;
    border-radius: 10px;
    background: #fff;

    .list-select {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .list-select-title {
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 1px;
      }
    }

    .list-content {
      padding: 10px;
      height: 45vh;
      overflow: auto;

      .list-content-item {
        padding: 18px 10px 10px 10px;
        margin-bottom: 10px;
        background: rgb(249, 250, 252);
        border-radius: 4px;
        color: #999;

        p {
          margin: 10px 0;
        }

        .item-name {
          display: inline-block;
          padding: 2px 8px;
          margin-right: 10px;
          background: #fdf4ed;
          color: #e39350;
        }

        .item-text {
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          /* 设置最大显示行数 */
          -webkit-box-orient: vertical;
          color: #000;
        }

        .item-info {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
